<template>
	<view class="book_list">
		<view class="title">
			{{title}}
			<label v-text="subTitle"></label>
			<view class="time" v-text="showTime"></view>
			<view class="more" v-if="isMore">更多></view>
		</view>
		<view class="nav_box" v-if="navlist.length > 0">
			<view class="item" :class="{on:currNav == val.value}" v-for="val in navlist" v-text="val.label" @click="changeNav(val.value)"></view>
		</view>
		<view class="scroll-view">
			<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="0">
				 <view  class="scroll-view-item_H" v-for="(val,ind) in list" :key="ind" @tap="tabinfo">
					<view class="img_box">
						<view class="free" v-if="showTime">限免</view>
						<view class="ranking" :class="{one:ind == 0,two:ind == 1,three:ind == 2}" v-if="ranking">
							<view class="icon"><u-icon name="bookmark"></u-icon></view>
							TOP&nbsp;{{ind+1}}
						</view>
						<!-- <image :src="val.url"></image> -->
						<u-lazy-load  :image="val.url" threshold="300" border-radius="6"></u-lazy-load>
					</view>
					<view class="name" v-text="val.name"></view>
					<view class="author" v-text="val.author"></view>
				 </view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["book"],
		data() {
			return {
				// 标题
				title:this.book.tit,
				// 副标题
				subTitle:this.book.subTit,
				//是否显示更多
				isMore:this.book.more,
				// 数据列表
				list:this.book.list,
				// 限时免费的结束时间
				time:this.book.time,
				// 倒计时的时间
				showTime:"",
				//排行榜
				ranking:this.book.ranking || false,
				// 当前导航的index
				currNav:this.book.currNav,
				// 导航列表
				navlist:this.book.nav || []
			}
		},
		onLoad() {
			
		},
		created() {
			this.getEndTime();
		},
		methods: {
			tabinfo(){
				this.$u.route({
					url: 'pages/book/bookinfo'
				})
			},
			getEndTime(){
				if(this.book.time){
					var that = this;
					setInterval(function(){
						var et = new Date(that.book.time).getTime();
						var st = new Date().getTime();
						var t = et - st;
						if(t > 0){
							that.showTime =  that.date_format(t);
						}else{
							clearInterval();
						}
					},1000)
				}
			},
			//时分秒换算
			date_format(micro_second) {
				// 总秒数
				var second = Math.floor(micro_second / 1000);
				// 天数
				var day = Math.floor(second / 3600 / 24);
				// 小时
				var hr = Math.floor(second / 3600 % 24);
				// 分钟
				var min = Math.floor(second / 60 % 60);
				// 秒
				var sec = Math.floor(second % 60);
				return day + "天" + hr + "小时" + min + "分钟" + sec + "秒";
			},
			// 更改导航
			changeNav(i){
				this.currNav = i; 
				this.$emit("changeNav",i)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.book_list{
		.title{
			margin: 20rpx;
			padding:0 10rpx;
			font-size: 32rpx;
			font-weight: 700;
			border-left: 2px solid #ed424b;
			position: relative;
			label{
				font-size: 28rpx;
				color: #999;
				margin-left: 10rpx;
			}
			.time{
				color: #999;
				vertical-align: middle;
				display: inline-block;
			}
			.more{
				position: absolute;
				right: 20rpx;
				top: 50%;
				margin-top: -20rpx;
				line-height: 40rpx;
				color: #999;
			}
		}
		// 导航
		.nav_box{
			margin: 20rpx;
			border-radius: 8rpx;
			border: 1px solid  #ed424b;
			display: flex;
			.item{
				flex: 1;
				color: #ed424b;
				text-align: center;
				border-right: 1px solid #ed424b;
				&:last-child{
					border: 0;
				}
				&.on{
					color: #fff;
					background-color: #ed424b;
				}
			}
			
		}
		// 横向滚动
		.scroll-view{
			height: 320rpx;
			overflow: hidden;
			.scroll-view_H{
				width: 100%;
				height: 320rpx;
				font-size: 0;
				white-space: nowrap;
				
				.scroll-view-item_H{
					width: 150rpx;
					margin: 20rpx;
					vertical-align: top;
					display: inline-block;
					.img_box{
						width: 100%;
						height: 200rpx;
						position: relative;
						overflow: hidden;
						.free,.ranking{
							position: absolute;
							left: -50rpx;
							top: 0;
							width: 100%;
							text-align: center;
							z-index: 888;
							color: #fff;
							transform:rotate(-45deg);
							background-color: #4284ed;
						}
						.ranking{
							font-size: 20rpx; 
							line-height: 30rpx;
							background-color: #969ba3;
							&.one{
								background-color: #e73500;	
							}
							&.two{
								background-color: #f0643a;
							}
							&.three{
								background-color: #f0c53a;
							}
						}
						
						 
						image{
							width: 100%;
							height: 100%;
						}
					}
					.name{
						font-size: 28rpx;
						line-height: 40rpx;
						max-height: 80rpx;
						white-space:normal;
						overflow: hidden;
					}
					.author{
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>
